<template>
    <el-select-v2 v-model:model-value="value" @change="emit('flushed')" filterable remote :remote-method="remoteMethod"
        clearable :options="options" :props="prop" placeholder="请输入名称" />
</template>

<script setup>
import { ref, computed } from 'vue';
import { getList as getCollaboratorsList } from "@/apis/collaborators";
import { debounce } from 'lodash';

const props = defineProps({
    modelValue: {
        type: String
    },
    type: {
        type: Number
    }
});

const emit = defineEmits(['update:modelValue', 'flushed']);

const options = ref([])
const value = computed({
    get() {
        return props.modelValue
    },
    set(val) {
        emit('update:modelValue', val)
    }
})
const prop = {
    label: 'name',
    value: 'thirdTag'
}
/**
 * 合并名称和id
 */
const mergeId = (list) => {
    return list.map(item => ({
        ...item,
        name: item.name + '(' + item.partnerId + ')'
    }))
}
/**
 * 根据关键词查询合作方（用于列表筛选）
 */
const remoteMethod = debounce(async (key) => {
    try {
        const res = await getCollaboratorsList({ current: 1, size: 100 }, { type:7, name: key });
        options.value = mergeId(res.data.list);
    } catch (error) {
    }
}, 300)
</script>

<style lang="scss" scoped></style>